import React,{createRef,useContext}from "react";
import Son from "./components/son.jsx"
import Sister from "./components/sister.jsx"

const Context=React.createContext()
export default class App extends React.Component {
 
  txtRef=createRef()
  state = {
    data: "hello",
    count: 7,
    count2: 0,
    list: [1, 2, 3, 4, 5], // 将 list 放入 state 中
  };
  sa=2
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  handleClick2 = () => {
    this.setState({ count2: this.state.count2 + 1 });
  };
  handleClick3=()=>{
    console.log(this.txtRef);
    
    this.setState({ count: this.txtRef.current.value });
  }
  changeList = () => {
    this.setState({ list: [...this.state.list, 6] });
  };
  sonToFather=(item)=>{
    this.setState({ count: this.state.count + item });
  }
  SisterToFather=(item)=>{
    this.setState({ count: this.state.count + item });
  }
  render() {
    return (
      <div>
        <Son name={this.state.count} sonToFather={this.sonToFather}></Son>
        <Sister name={this.state.count} SisterToFather={this.SisterToFather}></Sister>

        <h1>React</h1>
        <h1>{this.state.count}</h1>
        <input type="text"  defaultValue={this.state.count} ref={this.txtRef}/>
        <input type="text" value={this.state.count} readOnly />
         <input type="text" defaultValue={this.state.count2} /> 
        <input type="text" onInput={this.handleClick} />
        <input type="text" onChange={this.handleClick2} /> 
        <ul>
          {this.state.list.map((item) => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
        
        <button onClick={this.changeList.bind(this)}>click</button>
        <button onClick={this.handleClick.bind(this)}>Click</button>
        <button onClick={this.handleClick3.bind(this)}>Click3</button>
      </div>
    );
  }
}
